<template>
	<div class="side-left-right">
		<div class="item-plane">
			<div class="item_1">
				<div class="head">
					<span class="title">能源设备</span>
				</div>
				<div class="empty1">
					<div class="background_1" :class="{ 'activebg': isLeftActive }">
						<div class="image-1">
							<img src="/public/imgs/nw/电表 (1).png" />
						</div>
						<div class="text1">{{ valueGroup[0][0] }}</div>
						<div class="text2">{{ dian }}</div>
						<!-- <div class="left-button" @click="toggleLeftButton" :class="{ 'active': isLeftActive }"></div> -->
					</div>
					<div class="background_2" :class="{ 'activebg': isRightActive }">
						<div class="image-2">
							<img src="/public/imgs/nw/电表 (1) 拷贝.png" />
						</div>
						<div class="text3">{{ valueGroup[1][0] }}</div>
						<div class="text4">{{ shui }}</div>
						<!-- <div class="right-button" @click="toggleRightButton" :class="{ 'active': isRightActive }"></div> -->
					</div>
				</div>
			</div>
			<!-- 能源设备列表 -->
			<div class="item_5">
				<div class="head">
					<span class="title">设备列表</span>
				</div>
				<div class="m-list">
					<div class="boxinfo">
						<s-list ref="reflst" searchBarStyle="margin-top: 5px;" :itemStl="itemStl" :headStl="headStl"
							searchPlaceholder="请输入搜索内容" :head="dtjHead" :rows="dtjDts" :has-search="true"></s-list>
					</div>
				</div>
			</div>
			<!-- <div class="item_2">
				<div class="head">
					<span class="title">告警统计</span>
				</div>
				<div class="background-container">
					<div ref="pieChart" class="chart"></div>
				</div>
			</div>
			<div class="item_3">
				<div class="head">
					<span class="title">告警列表</span>
				</div>
				<div class="background-container">
					<s-list :itemStl="itemStl" ref="reflst" :headStl="headStl" :head="dtjHead" :rows="dtjDts" :has-search="false">
					</s-list>
				</div>
			</div> -->

		</div>
	</div>
</template>

<script setup>
import {
	ref,
	watch,
	onMounted
} from 'vue';
import * as echarts from 'echarts'
import sList from "cmpt/table.vue";
import store from '@/store/index.js';
// import callApi from '@/api/mockapi.js';
import { getDeviceNum, getDeviceList } from '@/api/energy.js';
// const callApiInstance = callApi();
const Caption1 = ref('能源设备');
const Caption2 = ref('告警统计');
const Caption3 = ref('告警详情');
//二维数组同时存名字和值
const valueGroup = ref([['电表', 0], ['水表', 15]]);
//定义按钮触发
const isLeftActive = ref(false);
const isRightActive = ref(false);
// 饼图容器的引用
const pieChart = ref(null)
const dian = ref(0);
const shui = ref(0);
onMounted(async () => {
	// 能源数量统计
	const deviceNum = await getDeviceNum()
	const parsedData = JSON.parse(deviceNum);
	parsedData[0].forEach(item => {
		if (item.dev_type.includes("电表")) {
			dian.value += Number(item.count);
		} else if (item.dev_type.includes("水表")) {
			shui.value += Number(item.count);
		}
	})

	// 能源列表
	const deviceList = await getDeviceList()
	const parsedData1 = JSON.parse(deviceList);
	// 将设备数据转换为 dtjDts 格式
	dtjDts.value = parsedData1[0].map(device => ({
		name: device.设备名称,
		type: device.类型,
		reading: device.设备读数
	}));

	const chart = echarts.init(pieChart.value);
	const option = {
		legend: {
			data: ['告警1', '告警2', '告警3', '告警4', '告警5'],
			bottom: 10,
			textStyle: {
				fontSize: 12,
				color: '#fff'
			}
		},
		series: [{
			name: '告警统计',
			type: 'pie',
			radius: [30, 90],
			center: ['50%', '42%'],
			roseType: 'area',
			avoidLabelOverlap: true,
			label: {
				show: true,
				position: 'outside',
				// 自定义 rich 格式：名称与百分比横向排列
				formatter: function (params) {
					let key;
					switch (params.name) {
						case '告警1':
							key = 'percent1';
							break;
						case '告警2':
							key = 'percent2';
							break;
						case '告警3':
							key = 'percent3';
							break;
						case '告警4':
							key = 'percent4';
							break;
						case '告警5':
							key = 'percent5';
							break;
						default:
							key = 'percent';
					}
					return `{nameStyle|${params.name}} \n {${key}|${params.percent}%}`;
				},
				rich: {
					nameStyle: {
						color: '#FFFFFF',
						fontSize: 12,
						align: 'center'
					},
					percent1: {
						color: '#E74B3C',
						fontSize: 12,
						align: 'center'
					},
					percent2: {
						color: '#F99406',
						fontSize: 12,
						align: 'center'
					},
					percent3: {
						color: '#F7B719',
						fontSize: 12,
						align: 'center'
					},
					percent4: {
						color: '#C0CA34',
						fontSize: 12,
						align: 'center'
					},
					percent5: {
						color: '#00BCA9',
						fontSize: 12,
						align: 'center'
					}
				}
			},
			data: [{
				value: 16,
				name: '告警1',
				itemStyle: {
					color: '#E74B3C'
				}
			},
			{
				value: 16,
				name: '告警2',
				itemStyle: {
					color: '#F99406'
				}
			},
			{
				value: 16,
				name: '告警3',
				itemStyle: {
					color: '#F7B719'
				}
			},
			{
				value: 16,
				name: '告警4',
				itemStyle: {
					color: '#C0CA34'
				}
			},
			{
				value: 36,
				name: '告警5',
				itemStyle: {
					color: '#00BCA9'
				}
			}
			],
			labelLine: {
				length: 5,
				length2: 10,
				minTurnAngle: 30, // 防止部分标签线与下方图标重叠
				lineStyle: {
					color: '#FFFFFF'
					// color: function (params) {
					// 	return params.data.itemStyle.color;
					// }
				}
			}
		}],
		graphic: [{
			type: 'group',
			children: [{
				type: 'text',
				left: 168,
				top: 80, // 根据实际情况微调
				style: {
					text: '总计',
					fill: '#FFFFFF', // 白色
					fontSize: 13,
					align: 'center'
				}
			},
			{
				type: 'text',
				left: 164,
				top: 97,
				style: {
					text: '100',
					fontFamily: 'Adobe Heiti Std',
					fontWeight: 'bold',
					fontSize: 18,
					fill: '#FF4E4E',
					lineHeight: 41,
					fontStyle: 'italic',
					background: 'linear-gradient(0deg, #FF9C9C 0%, #FF1515 100%)',
					// 让背景应用到文字上
					backgroundClip: 'text',
					textFill: 'transparent',
					align: 'center',
				}
			}
			]
		}]
	};
	chart.setOption(option);
	// 获取能源设备数据
	// try {
	// 	const energyDeviceData = await callApiInstance.scene.getEnergyDeviceData();
	// 	if (energyDeviceData) {
	// 		// 更新标题
	// 		Caption1.value = energyDeviceData.title;
	// 		// 更新设备数据 - 优化版本
	// 		const devices = energyDeviceData.devices;
	// 		// 确保至少有两个设备（电表和水表）
	// 		if (devices.length >= 2) {
	// 			valueGroup.value = [
	// 				[devices[0].atrName, devices[0].valFloat || 0],
	// 				// [devices[1].atrName, devices[1].valFloat || 0]
	// 				[devices[1].atrName, devices[1].valFloat || 15]
	// 			];
	// 		} else if (devices.length === 1) {
	// 			// 如果只有一个设备
	// 			valueGroup.value = [
	// 				[devices[0].atrName, devices[0].valFloat || 0],
	// 				['水表', 0] // 默认值
	// 			];
	// 		}
	// 		// 如果没有设备数据，保持默认值
	// 	}
	// } catch (error) {
	// 	console.error('获取能源设备数据失败:', error);
	// }
	//获取告警统计图表数据
	// try {
	// 	const alarmTotalData = await callApiInstance.scene.getAlarmTotalData();
	// 	if (alarmTotalData) {
	// 		console.log('告警统计数据:', alarmTotalData);
	// 		// 更新标题
	// 		Caption2.value = alarmTotalData.title;
	// 		// 更新饼图数据
	// 		const alarms = alarmTotalData.AlarmMerbers;
	// 		const total = "100%";
	// 		// 准备饼图数据
	// 		const chartData = alarms.map(alarm => ({
	// 			name: alarm.atrName,
	// 			value: alarm.valFloat,
	// 		}));
	// 		// 更新图表
	// 		chart.setOption({
	// 			legend: {
	// 				data: alarms.map(alarm => alarm.atrName)
	// 			},
	// 			series: [{
	// 				data: chartData,
	// 				label: {
	// 					show: true,
	// 					position: 'outside',
	// 					formatter: function (params) {
	// 						return [
	// 							'{c|' + params.value + '}',
	// 							'{name|' + params.name + '}'
	// 						].join('\n');
	// 					},
	// 					rich: {
	// 						c: {
	// 							color: '#FFFFFF',
	// 							fontSize: 11,
	// 							align: 'center'
	// 						},
	// 						name: {
	// 							color: '#FFFFFF',
	// 							fontSize: 11,
	// 							align: 'center'
	// 						}
	// 					}
	// 				}
	// 			}],
	// 			graphic: [{
	// 				type: 'group',
	// 				children: [{
	// 					type: 'text',
	// 					left: 171,
	// 					top: 90,
	// 					style: {
	// 						text: '总计',
	// 						fill: '#FFFFFF',
	// 						fontSize: 12,
	// 						align: 'center'
	// 					}
	// 				},
	// 				{
	// 					type: 'text',
	// 					left: 162,
	// 					top: 96,
	// 					style: {
	// 						text: total.toString(),
	// 						fontFamily: 'Adobe Heiti Std',
	// 						fontWeight: 'bold',
	// 						fontSize: 14,
	// 						fill: '#FF4E4E',
	// 						lineHeight: 41,
	// 						fontStyle: 'italic',
	// 						background: 'linear-gradient(0deg, #FF9C9C 0%, #FF1515 100%)',
	// 						backgroundClip: 'text',
	// 						textFill: 'transparent',
	// 						align: 'center',
	// 					}
	// 				}]
	// 			}]
	// 		});
	// 	}
	// } catch (error) {
	// 	console.error('获取告警统计数据失败:', error);
	// }
	//获取告警列表数据
	// try {
	// 	const alarmListData = await callApiInstance.scene.getAlarmListData();
	// 	if (alarmListData) {
	// 		console.log('告警列表数据:', alarmListData);
	// 		// 更新标题
	// 		Caption3.value = alarmListData.title;
	// 		// 检查并处理表头数据
	// 		if (alarmListData.listHead) {
	// 			// API返回的表头数据可能是一个对象，其中包含了表头信息
	// 			// 将这些信息转换为我们需要的格式
	// 			const headData = [];
	// 			// 遍历对象的属性，每个属性都是一个列
	// 			for (const key in alarmListData.listHead) {
	// 				if (Object.prototype.hasOwnProperty.call(alarmListData.listHead, key)) {
	// 					const columnInfo = alarmListData.listHead[key];
	// 					// 根据列信息创建表头项
	// 					headData.push(
	// 						listHead(
	// 							key,  // 键名
	// 							columnInfo,  // 显示名称（假设值就是显示名称）
	// 							key === 'BTime' ? '200px' : null,  // 如果是时间列，设置固定宽度
	// 							null,  // 图标
	// 							null,  // 事件
	// 							false,  // 排序
	// 							'',  // 颜色
	// 							'FZHZGBJWGB10',  // 字体
	// 							"12px"  // 字体大小
	// 						)
	// 					);
	// 				}
	// 			}
	// 			// 如果成功提取了表头数据，则更新表头
	// 			if (headData.length > 0) {
	// 				dtjHead.value = headData;
	// 			}
	// 		}
	// 		// 处理表格数据
	// 		if (alarmListData.listData && Array.isArray(alarmListData.listData)) {
	// 			// 将API返回的列表数据转换为组件需要的格式
	// 			const rowsData = [];
	// 			// 遍历每一行数据
	// 			for (const row of alarmListData.listData) {
	// 				const newRow = {};
	// 				// 遍历每一行中的所有属性
	// 				for (const key in row) {
	// 					if (Object.prototype.hasOwnProperty.call(row, key)) {
	// 						let value = row[key];
	// 						// 如果是严重程度字段，添加颜色样式
	// 						// if (key === 'BjType' || key.toLowerCase().includes('type') || key.toLowerCase().includes('level')) {
	// 						// 根据值设置不同的颜色
	// 						let color = '';
	// 						const valueStr = String(value).toLowerCase();
	// 						if (valueStr.includes('高') || valueStr.includes('严重') || value === '3') {
	// 							color = '#FF2323'; // 红色 - 高级别
	// 						} else if (valueStr.includes('中') || value === '2') {
	// 							color = '#FFE401'; // 黄色 - 中级别
	// 						} else if (valueStr.includes('低') || value === '1') {
	// 							color = '#FF8A00'; // 橙色 - 低级别
	// 						}
	// 						if (color) {
	// 							value = `<span style='color:${color}'>${value}</span>`;
	// 						}
	// 						newRow[key] = value;
	// 					}
	// 				}
	// 				rowsData.push(newRow);
	// 			}
	// 			// 更新表格数据
	// 			if (rowsData.length > 0) {
	// 				dtjDts.value = rowsData;
	// 			}
	// 		}
	// 	}
	// } catch (error) {
	// 	console.error('获取告警列表数据失败:', error);
	// }
});

function toggleLeftButton() {
	// 切换左侧按钮的状态
	isLeftActive.value = !isLeftActive.value;
	isRightActive.value = false;
	store.dispatch("updateDian", isLeftActive.value);
	store.dispatch("updateShui", isRightActive.value);
}

function toggleRightButton() {
	// 切换右侧按钮的状态
	isRightActive.value = !isRightActive.value;
	isLeftActive.value = false;
	store.dispatch("updateDian", isLeftActive.value);
	store.dispatch("updateShui", isRightActive.value);
}
function listHead(k, v, w, icon, ev, s, color) {
	return {
		k,
		v,
		w,
		icon: icon || null,
		click: ev || null,
		sort: s,
		color: color || null
	};
}
const dtjHead = ref([
	listHead("name", "名称", null, null, null, false),
	listHead("type", "类型", null, null, null, false),
	listHead("reading", "读数", null, null, null, false)
]);

const headStl = "width:100%; height:32px;background-size: 100% 100%; background-position: center center;margin: 0 auto;"
const itemStl =
	"background-repeat: no-repeat; background-image:url('/imgs/nw/图层 1301.png'); width:100%; height:28px;margin: 0 auto; margin-top: 4px; background-size: 100% 100%; background-position: center center;"
const dtjDts = ref();
watch(dtjDts, (newVal) => {
	console.log('dtjDts updated:', newVal);
});
</script>
<style scoped lang="scss">
.side-left-right {
	padding: 0;
}

.item-plane {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 0;
	// height: 882px;
}

.item_1 {
	height: 20%;
	background-position: top left;
	position: relative;
	background-size: 100% 100%;
	margin-right: 20px;
	margin-top: 12px;

	.title {
		margin-top: 9px;
		margin-left: 83px;
		width: auto;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 24px;
		color: #FFFFFF;
		background: linear-gradient(180deg, #FFFFFF 50%, #77BC9C 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.head {
		display: flex;
		height: 45px;
		background-image: url('/imgs/hf/navi.png');
		background-position: left;
		background-size: 100% 100%;
	}

	.empty1 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
		margin-top: 20px;
		margin-left: 25px;
		width: 100%;
		height: 100%;
		background-position: left;
		background-size: 100% 100%;

		.background_1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 176px; // 设置小背景图的宽度
			height: 200px; // 设置小背景图的高度
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-image: url('/public/imgs/nw/圆角矩形 1(1).png');

			.image-1 {
				margin-top: 25px;
			}

			.text1 {
				font-family: DIN1451EF EngNeu;
				// font-weight: 400;
				font-family: Adobe Heiti Std R;
				font-weight: 400;
				font-size: 15px;
				color: #137DFF;
				background: linear-gradient(180deg, #FFFFFF 50%, #FFFFFF 50%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.text2 {
				font-family: DIN1451EF EngNeu;
				// font-weight: 400;
				font-family: Adobe Heiti Std R;
				font-weight: 400;
				font-size: 24px;
				color: #FFFFFF;
				background: linear-gradient(180deg, #FFFFFF 50%, #77BC9C 50%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.left-button {
				width: 81px;
				height: 90px;
				background-image: url('/public/imgs/jf/ui_2/组 1672.png');
				background-size: contain;
				background-repeat: no-repeat;
				transition: background-image 0.5s ease;
				cursor: pointer;
			}

			.left-button.active {
				background-image: url('/public/imgs/jf/ui_2/组 1670.png');
			}
		}

		.background_1.activebg {
			background-image: url("/imgs/af/圆角矩形 1@2x(1).png");
			background-size: 100% 100%;
		}

		.background_2 {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 176px; // 设置小背景图的宽度
			height: 200px; // 设置小背景图的高度
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-image: url('/public/imgs/nw/圆角矩形 1(1).png');

			.image-2 {
				margin-top: 25px;
			}

			.text3 {
				font-family: DIN1451EF EngNeu;
				// font-weight: 400;
				font-family: Adobe Heiti Std R;
				font-weight: 400;
				font-size: 15px;
				color: #137DFF;
				background: linear-gradient(180deg, #FFFFFF 50%, #FFFFFF 50%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.text4 {
				font-family: DIN1451EF EngNeu;
				// font-weight: 400;
				font-family: Adobe Heiti Std R;
				font-weight: 400;
				font-size: 24px;
				color: #FFFFFF;
				background: linear-gradient(180deg, #FFFFFF 50%, #77BC9C 50%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.right-button {
				width: 81px;
				height: 90px;
				background-image: url('/public/imgs/jf/ui_2/组 1672.png');
				background-size: contain;
				background-repeat: no-repeat;
				transition: background-image 0.5s ease;
				cursor: pointer;
			}

			.right-button.active {
				background-image: url('/public/imgs/jf/ui_2/组 1670.png');
			}
		}

		.background_2.activebg {
			background-image: url("/imgs/af/圆角矩形 1@2x(1).png");
		}
	}
}

.item_2 {
	height: 50%;

	.head {
		margin-top: 18px;
		width: 100%;
		display: flex;
		height: 45px;
		background-image: url('/imgs/hf/navi.png');
		background-size: 100% 100%;
	}

	.title {
		margin-top: 9px;
		margin-left: 83px;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 24px;
		color: #fff;
		background: linear-gradient(180deg, #FFFFFF 50%, #77BC9C 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.background-container {
		background-image: url("/public/imgs/nw/圆角矩形 1 拷贝 10.png");
		height: 100%;
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 20px 61px;
		justify-content: flex-start;
		margin-left: 25px;
		background-position: left;
		background-size: 100% 100%;
	}

	.chart {
		width: 100%;
		height: 100%;
	}
}

.item_3 {
	height: 40%;
	position: relative;

	.head {
		display: flex;
		margin-top: 18px;
		height: 45px;
		background-image: url('/imgs/hf/navi.png');
		background-size: 100% 100%;
	}

	.title {
		margin-top: 9px;
		margin-left: 83px;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 24px;
		color: #fff;
		background: linear-gradient(180deg, #FFFFFF 50%, #77BC9C 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.background-container {
		margin-top: 20px;
		margin-left: 20px;
		height: 280px;
		background-image: url("/public/imgs/nw/圆角矩形 1 拷贝 10.png");
		background-size: contain;
		background-repeat: no-repeat;
		// background-position: center;
		position: relative;
		padding: 4px;
	}

	/* s-list 直接按文档流排列，不额外设置 margin-top */
	.background-container s-list {
		width: 100%;
		height: 100%;
		margin: 0;
	}
}

.item_5 {
	height: 70%;
	position: relative;

	.head {
		display: flex;
		height: 45px;
		background-image: url('/imgs/hf/navi.png');
		background-size: 100% 100%;
	}

	.title {
		margin-top: 9px;
		margin-left: 83px;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 24px;
		color: #fff;
		background: linear-gradient(180deg, #FFFFFF 50%, #77BC9C 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.m-list {
		margin-top: 20px;
		display: flex;
		flex-wrap: wrap;
		height: 500px;
		background-image: url('/imgs/hf/deviceInfo.png');
		background-size: 100% 100%;
		margin-left: 20px;
		background-repeat: no-repeat;
		padding: 4px;

		.boxinfo {
			width: 100%;
		}

	}
}
</style>